import React, { FC, useEffect, useState } from 'react'
import Table from '@/components/pages/logistics/table'
import ChartPie from '@/components/pages/chartPie'
import Total from '@/components/pages/logistics/total'
import Transport from '@/components/pages/logistics/transport'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import { IPieChart, ISale, ISaleFull } from '@/types/pages/salesAnalysis/interface'
import { inject, observer, PropTypes } from "mobx-react";
import Title from '@/components/pages/titleTop'
import ChartChina from '@/components/pages/chartChina'
import FullCount from '@/components/pages/fullCount'
import chinaMap from '@/assert/images/salesAnalysis/china.png'
import nanhai_sea from '@/assert/images/salesAnalysis/nanhai_sea.png'
import bg_big from '@/assert/images/salesAnalysis/bg_big.png'
import railway_url from '@/assert/images/logistics/railway.png'
import roadTransport_url from '@/assert/images/logistics/roadTransport.png'
import bg_verticle from '@/assert/images/backFrame.png'
const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    .left{
      flex:1 1 48%;
      display: flex;
      flex-direction: column;
      .sale{
        flex:1 1 30%;
        padding:3rem;
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .sale-content{
          margin-top: 7rem;
          display: flex;
          flex-direction: row;
          align-content: center;
          justify-content: center;

        .sale-total{
          flex:1 1 30%
        }
        .sale-count,.sale-money{
          flex:1 1 40%
        }
        }

      }
      .map{
        flex:1 1 70%;
        position:relative;
        background-image: url(${bg_big});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .map-total-info{
        position:absolute;
        top:3rem;
        left:4rem;
        width:60rem;
        height: 5.4rem;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
      }
      .map-content{
        width: 100%;
        height: 100%;
        background-image: url(${chinaMap});
        background-position-x: 30%;
        background-position-y: 30%;
        background-size: 80% 80%;
        background-repeat: no-repeat;
      }
      .map-content:after{
        content: "";
        position: absolute;
        width: 10.2rem;
        height: 14.1rem;
        bottom: 6rem;
        right: 6rem;
        background-image: url(${nanhai_sea});
        background-size: 100% 100%;
        background-repeat: no-repeat;

      }
    }
    .right{
      flex:1 1 52%;
      display: flex;
      flex-direction: column;
      .chart-pie{
        flex:1 1 55%;
        display: flex;
        .left-pie,.right-pie{
          flex:1;
        }
      }
      .chart-line{
        flex:1 1 45%;
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
`


const Content: FC<{}> = function () {
  const store = useStores();
  const { totalTransport, tarnTransport, carTransport, transportList, logisticsQuantity, pieLeftChart, pieRightChart,chinaChart } = store.logistics.screenData;
  const fnCallBack: FnCallBack = (data: Partial<ISaleFull>) => {
    store.header.srtScreenData(data);
    // setScreenData(store.header.headerControl.screenData);
    store.header.setHeaderName('物流分析');
    document.title = '物流分析';
  };
  useEffect(() => {
    store.logistics.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.logistics.getScreenData(type, date)
      fnCallBack<Partial<ISaleFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='left'>
        <div className='sale'>
          <Title name="物流运输" top="3rem" />
          <div className='sale-content'>
            <div className='sale-total'>
              <Total num={totalTransport.num!} unit={totalTransport.unit!} text="总运量" />
            </div>
            <div className='sale-count'>
              <Transport text="" num={tarnTransport.num!} unit={tarnTransport.unit!} comparisonText={tarnTransport.comparisonText} upDownStatus={tarnTransport.upDownStatus!} saleRate={tarnTransport.saleRate!} ImgUrl={railway_url} />
            </div>
            <div className='sale-money'>
              <Transport text="" num={carTransport.num!} unit={carTransport.unit!} comparisonText={carTransport.comparisonText} upDownStatus={carTransport.upDownStatus!} saleRate={carTransport.saleRate!} ImgUrl={roadTransport_url} />
            </div>
          </div>
        </div>
        <div className='map'><ChartChina title={chinaChart.title!} dataset={chinaChart.dataset}  /> <div className='map-total-info'>
          {logisticsQuantity.map((val,key)=><FullCount key={key} num={val.num!} unit={val.unit!} title={val.title!} />)}
          </div> </div>
      </div>
      <div className='right'>
        <div className='chart-line'>
          <Table name={transportList.name!} list={transportList.list!} />
        </div>
        <div className='chart-pie'>
          <div className='left-pie'>
            <ChartPie title={pieLeftChart.title!} dataset={pieLeftChart.dataset} />
          </div>
          <div className='right-pie'>
            <ChartPie title={pieRightChart.title!} dataset={pieRightChart.dataset} />
          </div>
        </div>

      </div>

    </ContentFrame>
  )
}

export default observer(Content)
